<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { StoreManagementList } from '@/api/BussinessMenage/index.js';
import { getReserveList } from '@/api/Member/index.js'
const props = defineProps({
    uuid:{
        default:"",
        type:[String,Number]
    }
})

const seachTable = ref(null);
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();

// 新增编辑回退时候刷新列表
onActivated(()=>{

})
const formInline = ref([
    {
        type: "select",
        placeholder: "门店",
        label: '',
        prop: 'storeId',
        data:[  

        ],
        model: "",
    },
    {
      type: "datePicker",
      prop: ["treatTimeStart", "treatTimeEnd"],
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      label: "",
      model: [],
    },

    {
      type: "input",
      prop: "projectNameLike",
      placeholder: "预约内容",
      label: "",
      model: "",
    },
    {
      type: "input",
      prop: "employeeNameLike",
      placeholder: "预约人员",
      label: "",
      model: "",
    },
    {
        type: "select",
        placeholder: "预约状态",
        label: '',
        prop: 'recordState',
        data:[
            {
                label:"待分配",
                value:0
            },
            {
                label:"未到店",
                value:1
            },
            {
                label:"待核销",
                value:2
            },
            {
                label:"核销审核中",
                value:3
            },
            {
                label:"核销通过",
                value:4
            },
            {
                label:"已取消",
                value:5
            }
        ],
        model: "",
    },
])

const btnLefts = ref([
])
const btnRights = ref([
])

const tableConfig = ref([
    {
      prop: "storeName",
      label: "门店",
      width:300,

    },
    {
      prop: "reserveTimeStart",
      label: "预约开始时间",
      width:250
    },
    {
      prop: "reserveTimeEnd",
      label: "预约结束时间",
      width:250
    },

    {
      prop: "projectName",
      label: "预约内容",
      width:400,
      type:"slot",
      slotName:"projectName"
    },
    {
      prop: "employeeName",
      label: "预约人员",
      width:200
    },
    {
      prop: "reserveState",
      label: "预约状态",

      format:(value)=>{
        return ["待分配","未到店","待核销","核销审核中","核销通过","已取消"][value]
      }
    },
]);
const tableLoading = ref(false)
const totalPage = ref(0)
const tableData = ref([]);
const _StoreManagementList = async ()=>{
    try{
        let params = {
            page:{
                size:99999,
                current:1
            },

        }

        let result = await StoreManagementList(params);
        let storeList  = result.records.map(info=>{
            return {
                value:info.id,
                label:info.storeName
            }
        })
        formInline.value[0].data = storeList;
    }catch(e){
        console.log(e);
    }


}

_StoreManagementList();
const handlerSearch = async (formInline)=>{
    tableLoading.value = true;
    try{
        let params = {};
        for (const key in formInline) {
            if(key == 'page'){
                params["page.current"] = formInline[key].current;
                params["page.size"] = formInline[key].size;
            }else{
                params[key] = formInline[key]
            }
        }
        params['memberId'] = props.uuid;
        let result = await getReserveList(params);
        totalPage.value = Number(result.total);
        tableData.value = result.records;
        tableLoading.value = false;
    }catch(e){
        tableLoading.value = false;
    }
}

</script>
<template>
    <div class="page-content">
        <SeachTable 
          :tableType="1"
          ref="seachTable"
          :forms="formInline"
          :btnLefts="btnLefts"
          :btnRights="btnRights"
          :tableLoading="tableLoading"
          :tableConfig="tableConfig"
          :tableData="tableData"
          :totalPage="totalPage"
          @handlerSearch="handlerSearch"
          :showLine="false"
        >
            <template #projectName="{ row }">
                <div class="info-show">
                    <div class="text-show">
                        {{ row.projectName }}
                    </div>
                    <el-tooltip placement="top">
                        <template #content>
                            <div class="tips-info">
                               <div class="tips-lis" v-for="(item,index) in row.projectList" :key="index">
                                    <div class="tips-title">
                                        {{ item.projectName }}
                                    </div>
                                    <div class="tips-dl" v-for="(lis,key) in item.stepList" :key="key">
                                        <div class="dl-title">
                                            {{ key + 1}}、{{ lis.projectName}}
                                        </div>
                                        <div class="dl-content">
                                            {{ lis.diagnosticStep }}
                                        </div>
                                    </div>

                               </div>

                            </div>
                        </template>
                        <img src="@/assets/images/warning-circle.png" alt="" class="img">
                    </el-tooltip>

                </div>
            </template>
        </SeachTable>
    </div>
</template>
<style lang="less" scoped>
.tips-info{
    max-width: 300px; 
    .tips-lis{
        width: 100%;
        margin-bottom:20px;
        .tips-title{
            width: 100%;
            font-size:14px;

            color:#fff;
            text-align: center;
        }
        .tips-dl{
            width: 100%;
            margin-bottom:10px;
            .dl-title{
                width: 100%;
                font-size:12px;

                color:#fff;
            }
            .dl-content{
                width: 100%;
                font-size:12px;
                word-break: break-all;
                word-wrap: break-word;
                color:#fff;
            }
        }
    }
}
.info-show{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text-show{
        max-width: calc(100% - 14px);
        box-sizing:border-box;
        padding-right:4px;
        font-weight: 400;
        color: #222222;
        line-height: 18px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .img{
        width: 14px;
        height: 14px;
        cursor: pointer;

    }
}
:deep(.search-line){
    padding:0;
}
:deep(.search-table .table){
    padding:0;
}
</style>